import React, { Component } from 'react'
import 'antd/dist/antd.css';
// 引入connect 用于UI组件链接redux
import { connect } from 'react-redux'
// 创建暴露Count的容器组件
import { createAddMsg, createNoaddMsg, createAsyncAddMsg } from '../../redux/count_action'
// 引入action对象
class Count extends Component {

    add = () => {
        this.props.add(1)
    }
    noadd = () => {
        this.props.noadd(1)
    }
    asyncadd = () => {
        this.props.asyncAdd(1,500)
    }
    render() {
        return (
            <div>
                当前求和为：{this.props.count}
                <button onClick={this.add}>相加</button>
                <button onClick={this.noadd}>相减</button>
                <button onClick={this.asyncadd}>异步相加</button>
            </div>
        )
    }
}
const mapStateToProps = (count) => {
    return { count }
}
export default connect(mapStateToProps, {
    // 通知redux执行加法
    add: createAddMsg,
    noadd: createNoaddMsg,
    asyncAdd: createAsyncAddMsg
})(Count)